<template>
	<view class="promotion-wrapper">
		<view class="promotion-user-wrapper">
			<view class="" :style="{ height: statusHeight + 'px'}"></view>
			<view class="promotion-title fz32">推广</view>
			<view class="promotion-user-info flex-c-s">
				<view class="user-info flex-c">
					<image v-if="userInfo.portrait" class="user-avarta" :src="userInfo.portrait" mode=""></image>
					<image v-else class="user-avarta" src="/static/images/default-img.png" mode=""></image>
					<text v-if="userInfo.nickName" class="user-name fz32">{{userInfo.nickName}}</text>
					<text v-else class="user-name fz32" @click="login">请登录</text>
					<view v-if="userInfo?.userRelations?.levels === 2 && userInfo.nickName"  class="marker-tag flex-c-c fz22">创客</view>
				</view>
				<view class="apply-promotion-wrapper-qr flex-c">
					<view class="apply-promotion flex-c-c " @click="applyMarker"  v-if="userInfo?.userRelations?.levels !== 2">
						<image style="width: 34rpx;height: 34rpx;" src="/static/images/image71@2x.png" mode=""></image>
						<text class="fz24 color-theme">申请成为创客</text>
					</view>
					<view class="promotion-qr flex-c-c " @click="markerQr">
						<image style="width: 44rpx;height: 44rpx;" src="/static/images/settings@2x.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="income-wrapper mg24">
				<view class="income-number flex-c-s">
					<view class="immediate-statictics">
						<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false">
							<uni-grid-item>
								<view class="income-num-item income-first">
									<text class="fz22">累计收益（元）</text>
									<view class="income-money">
										￥ {{ myProperty.cumulativeEarnings || 0}}
									</view>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="income-num-item" >
									<text class="fz22">今日收益（元）</text>
									<view class="income-money">
										￥ {{ myProperty.todayEarnings || 0}}
									</view>
								</view>
							</uni-grid-item>
						</uni-grid>
						
						<uni-grid :column="2" :showBorder="false" :square="false" :highlight="false" class="mt20">
							<uni-grid-item>
								<view class="income-num-item income-first">
									<text class="fz22">直推人数</text>
									<view class="income-money">
										{{myProperty.immediateCount || 0}} <text class="fz24">人</text>
									</view>
								</view>
							</uni-grid-item>
							<uni-grid-item>
								<view class="income-num-item">
									<text class="fz22">总人数</text>
									<view class="income-money">
										{{myProperty.totalCount || 0}} <text class="fz24">人</text>
									</view>
								</view>
							</uni-grid-item>
						</uni-grid>
						<!-- <view class="flex-c">
							<view class="income-num-item income-first">
								<text class="fz22">累计收益（元）</text>
								<view class="income-money">
									￥ {{ myProperty.cumulativeEarnings || 0}}
								</view>
							</view>
							<view class="income-num-item" style="margin-left: 100rpx;">
								<text class="fz22">今日收益（元）</text>
								<view class="income-money">
									￥ {{ myProperty.todayEarnings || 0}}
								</view>
							</view>
						</view> -->
						
						<!-- <view class="flex-c mt15">
							<view class="income-num-item income-first">
								<text class="fz22">直推人数(人)</text>
								<view class="income-money">
									{{myProperty.immediateCount || 0}} 
								</view>
							</view>
							<view class="income-num-item" style="margin-left: 100rpx;">
								<text class="fz22">总人数(人)</text>
								<view class="income-money">
									{{myProperty.totalCount || 0}}
								</view>
							</view>
						</view> -->
					</view>
					<view class="income-num-item flex-c propose-money flex-c-c" @click="withDrawal">
						<text class="color-theme fz26">收益明细</text> 
						<uni-icons type="forward" color="#EB5883" size="17"></uni-icons>
					</view>
				</view>
				
			</view>
		</view>
		<!-- <view class="flex-c immediate-statictics">
			<view class="">
				<view class="fz32">
					{{myProperty.immediateCount || 0}} 人
				</view>
				<view class="fz26 color999">
					直推人数
				</view>
			</view>
			<view class="ml20" style="margin-left: 200rpx;">
				<view class="fz32">
					{{myProperty.totalCount || 0}} 人
				</view>
				<view class="fz26 color999">
					总人数
				</view>
			</view>
		</view> -->
		<view class="mg24 sort-wrapper" style="margin-bottom: 0;">
			<image src="/static/images/Group72@2x.png" style="width: 702rpx;height: 100rpx;" mode=""></image>
		</view>
		<view class="rank-list-wrapper">
			<view v-for="(r, index) of rankListData" :key="r.rank">
				<view  class="rank-item mg24 flex-c-s" :class="[index === 0 ? 'clear-m' : '']"  v-if="index < 5">
					<view class="medal-wrapper flex-c">
						<view class="medal-img-wrapper">
							<image v-if="r.rank === 1" src="/static/images/Maskgroup@2x2.png" mode=""></image>
							<image v-if="r.rank === 2"  src="/static/images/Maskgroup@2x1.png" mode=""></image>
							<image v-if="r.rank === 3"  src="/static/images/Maskgroup@2x.png" mode=""></image>
							<view class="rank-number" v-if="r.rank > 3">{{r.rank}}</view>
						</view>
						<view class="medal-img-round">
							<view :class="['rank-user-avarta' ,r.rank === 1 ? 'rankimg1' : r.rank === 2 ?'rankimg2' : r.rank === 3 ? 'rankimg3' : 'rankdefault']">
								<image class="rank-user-avarta-img" :class="[r.rank > 3 ? 'default-img' : '']" :src="r.portrait || '/static/images/default-img.png'" mode="aspectFill"></image>
							</view>
							<!-- <image v-if="r.rank === 1" src="/static/images/Frame67@2x.png" mode=""></image>
							<image v-if="r.rank === 2"  src="/static/images/Frame66@2x.png" mode=""></image>
							<image v-if="r.rank === 3"  src="/static/images/Frame68@2x.png" mode=""></image>
							<imag e v-if="r.rank > 3" style="width: 78rpx;height: 78rpx;margin-right: 32rpx;"  src="/static/images/Rectangle750@2x.png" mode=""></image>-->
						</view>
						<view class="rank-user fz26">
							{{r.nickname || '-'}}
						</view>
					</view>
					<view class="rank-money color-theme">
						￥ {{r.earnings}}
					</view>
				</view>
			</view>
		</view>
		<view class="no-data" v-if="!rankListData.length">
			<NoData msg="暂无推广排行" />
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { onReady, onShow } from '@dcloudio/uni-app'
import { queryProperty, rankList } from '@/http/promotion'

import { IUserInfo, IMyProperty, IRankList } from '@/types'

import NoData from '@/components/NoData.vue'

export default defineComponent({
	components: { NoData },
	setup() { 
		const state = reactive({
			rankListData: [] as Array<IRankList>,
			userInfo: {} as IUserInfo,
			myProperty: {} as IMyProperty,
		})
		const statusHeight = ref(0)
		onReady(() => {
			uni.getSystemInfo({
				success(res) {
					statusHeight.value = res.statusBarHeight!
				}
			})
		})
		
		onShow(() => {
			uni.getStorage({
				key: 'userInfo',
				success(res) {
					let user = JSON.parse(res.data || '{}');
					user && (state.userInfo = user || {}) && queryMyProperty();
				}
			})
			getRankList()
		})
		
		const applyMarker = () => {
			if(!state.userInfo?.nickName) {
				uni.showToast({ title: '请先登录', icon: 'error'})
				return
			}
			uni.navigateTo({
				url: '/pages/promotionPackge/applyMarker/marker'
			})
		}
		
		const queryMyProperty = async () => {
			let res = await queryProperty()
			console.log(res);
			if(res.code === 0) {
				state.myProperty = res.data 
			}
		}
		
		const getRankList = async () => {
			let res = await rankList();
			
			if(res.code === 0) {
				state.rankListData = res.data
			}
		}
		
		const withDrawal = () => { // 提现
			if(!state.userInfo?.nickName) {
				uni.showToast({ title: '请先登录', icon: 'error'})
				return
			}
			uni.navigateTo({
				url: '/pages/promotionPackge/rewardList/rewardList'
			})
		}
		const markerQr = () => { // 创客二维码
			if(!state.userInfo?.nickName) {
				uni.showToast({ title: '请先登录', icon: 'error'})
				return
			}
			uni.navigateTo({
				url: '/pages/promotionPackge/markerQr/markerQr'
			})
		}
		
		const login = () => {
			uni.navigateTo({
				url: '/pages/login/index'
			})
		}
		return {
			withDrawal,
			applyMarker,
			statusHeight,
			markerQr,
			login,
			...toRefs(state)
		}
	}
})
</script>

<style>page{ background-color: #f8f8fa;}</style>
<style lang="scss">
.promotion-wrapper{
	 padding-bottom: 20rpx;
	 .immediate-statictics{ 
		 width: 70%;
		 // text-align: center;
		 .income-number{
			 width: 180rpx;
		 }
	 }
	.promotion-user-wrapper{
		height: 550rpx;
		background-image: url(/static/images/Frame18@2x.png);
		background-size: 750rpx 550rpx;
		background-repeat: no-repeat;
		background-position: 0 0;
		.promotion-title{
			padding: 32rpx 0 56rpx;
			color: #fff;
			text-align: center;
		}
		.promotion-user-info{
			.user-info{
				margin-left: 24rpx;
				.user-avarta{
					width: 90rpx;
					height: 90rpx;
					border-radius: 45rpx;
				}
				.user-name{
					color: #fff;
					margin-left: 18rpx;
				}
			}
			.marker-tag{
				width: 80rpx;
				height: 36rpx;
				background: linear-gradient(90deg,#ffffff 50%, #f9dee8 100%);
				border-radius: 18rpx;
				color: #eb5883;
				margin-left: 12rpx;
			}
		}
		.apply-promotion-wrapper-qr{
			.apply-promotion{
				width: 238rpx;
				height: 56rpx;
				background: linear-gradient(90deg,#ffffff 0%, #f9dee8 100%);
				border-radius: 38rpx;
				margin-right: 16rpx;
			}
			.promotion-qr{
				width: 94rpx;
				height: 56rpx;
				background: #ffffff;
				border-radius: 28rpx 0px 0px 28rpx;
			}
		}
		.income-wrapper{
			margin-top: 60rpx;
			.income-number{
				width: 702rpx;
				// height: 186rpx;
				background: linear-gradient(104deg,#ffe0f1 0%, #f2b2be 100%);
				border-radius: 16rpx ;
				padding: 16rpx 0;
				.income-num-item{
					.income-money{
						font-size: 32rpx;
						color: #53143a;
						font-weight: 800;
						margin-top: 10rpx;
					}
				}
				.income-first{
					margin-left: 55rpx;
				}
			}
			.propose-money{
				width: 150rpx;
				height: 66rpx;
				background: #f8f8fa;
				border-radius: 38rpx 0px 0px 38rpx;
			}
		}
		.grid-wrapper{
			background-color: #fff;
			border-radius: 0px 0px 16rpx 16rpx;
			.custome-grid-item{
				padding: 16rpx 20rpx;
				font-size: 32rpx;
				.text{
					font-size: 22rpx;
					color:#666;
				}
			}
		}
	}
	.sort-wrapper{
	}
	.rank-list-wrapper{
		.rank-number{
			width: 50rpx;
			margin-right: 40rpx;
			text-align: center; 
			font-size: 32rpx;
			font-family: PingFang SC, PingFang SC-600;
			font-weight: 600;
			color: #f8bad1;
		} 
		.clear-m{
			margin-top: 0rpx;
		}
		.rank-item{ 
			height: 110rpx;
			padding: 0 24rpx;
			background: #ffffff;
			border-radius: 16rpx;
			box-shadow: 0px 0px 8rpx 0px rgba(168,130,130,0.05); 
			
			.medal-img-wrapper{
				image{
					width: 50rpx;
					height: 62rpx;
					margin-right: 32rpx;
				}
			}
			.medal-img-round{
				.rank-user-avarta{
					background-repeat: no-repeat;
					background-size: 94rpx 94rpx;
					background-position: center;
					width: 94rpx;
					height: 94rpx;
					margin-right: 16rpx;
					
				}
				.rankimg1{ background-image: url(/static/images/Frame67@2x.png); }
				.rankimg2{ background-image: url(/static/images/Frame66@2x.png); }
				.rankimg3{ background-image: url(/static/images/Frame68@2x.png); }
				$defaults-size:80rpx;
				.rankdefault{ 
					width: $defaults-size;
					height: $defaults-size;
					background-image: url(/static/images/Rectangle750@2x.png); 
					background-size: $defaults-size $defaults-size;
					margin-right: 22rpx;
				}
				.rank-user-avarta-img{
					width: 66rpx;
					height: 66rpx;
					margin: 22rpx 0 0 16rpx;
					border-radius: 50%;
				} 
				.default-img{
					margin: 7rpx 0 0 7rpx;
					width: 66rpx;
					height: 66rpx;
				}
			}
			.rank-money{
				font-size: 32rpx;
				font-family: Plus Jakarta Sans, Plus Jakarta Sans-800;
				font-weight: 800;
			}
		}
	}
}
</style>
